<template>
  <div class="comments">

      <div class="editbox">
        <div>
          <el-avatar :size="45" :src="userStore.avatar" />
        </div>
        <div class="editbox-middle">
          <el-input
              placeholder="与其赞同别人的话语，不如自己畅所欲言..."
              v-model="comment"
              style="height: 40px"
          ></el-input>
        </div>
        <div>
          <el-button type="primary" style="height: 40px" @click="handlePublish(comment)">发布</el-button>
        </div>
      </div>

      <div class="listbox" v-for="(item, index) in commentsList" :key="index">
        <!-- 顶级留言：这没什么好说的，就直接展示遍历的结果 -->
        <div class="top-level">
          <div class="listbox-top-user">
            <el-avatar :size="45" v-if="item.userImg==='' " src="/profile.jpg" />
            <el-badge v-else  :value="item.contentFlag === 1 ? '作者' : ''" :offset="[-31.6, -1]">
              <el-avatar :size="45"  :src="IP+ baseURL +item.userImg" />
            </el-badge>
            <p>
              <span>{{ item.userName }}</span>
            </p>
          </div>
          <div class="listbox-middle-root">{{ item.commentDetails }}</div>
          <div class="listbox-bottom">

            <span>发布时间：{{ item.commentDate }}</span>
            <span v-if="item.userId !== userStore.id" @click="handleReply(item)">回复</span>
            <span v-if="item.userId === userStore.id" @click="removeReply(item)">删除</span>
            <span v-if="item.status === -1" @click="add_praise(item.id,item.contentId)"> 点赞 {{item.likeNum}}</span>
            <span v-else style="color: #bd1212" @click="close_praise(item.id,item.contentId)"> 已点赞 {{item.likeNum}} </span>
          </div>
        </div>

        <div v-if="item.children && item.children.length">
          <SecondComment
              :secondComments="item.children"
              @handle-reply="handleReply"
              @remove-reply="removeReply"
              @add-like="add_praise"
              @close-like="close_praise"
              style="margin-left: 0"
          />
        </div>
      </div>

    <el-drawer
        v-model="drawer"
        :direction="'ttb'"
        :show-close="false"
        style="align-items: center;width: 100%; justify-content: center;"
        :size="280"
    >
      <div style="display: flex;"> <!-- 添加这一行，将内部容器设置为Flex布局 -->
        <div class="brutalist-container">
          <input :placeholder="'给'.concat(repl).concat('回复')"
                 class="brutalist-input smooth-type"
                 type="text"
                 v-model="replyCotent"
          />
          <label class="brutalist-label">please input</label>
        </div>
        <div>
          <button class="btn" @click="reply(replyCotent)">Reply</button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { getReviewList,addReview,saveReviews,delReply,addReviewLog,getLikeList} from "@/api/article.js";
import SecondComment from "@/components/articleExample/SecondComment.vue";
import useUserStore from "@/stores/user.js";
import { ElMessage } from 'element-plus'
const userStore = useUserStore()
const drawer = ref(false)
const replyCotent = ref('')
// 收集 “编辑区” 的输入内容
const comment = ref("");
// 存储请求回来的留言列表
const commentsList = ref([]);
const id = ref(null)
const repl = ref("");
const baseURL = import.meta.env.VITE_APP_BASE_API
const IP = import.meta.env.VITE_APP_BASE_IP
// 接收父组件传过来的值——在别的文件中使用留言组件，则改文件为留言组件的父组件
const props = defineProps({
// 关联主体ID
  momentId: {
    type: Number,
    required: true,
  },
});

async function close_praise(id,articleId) {
  if (userStore.id === '' || userStore.id == null) {
    ElMessage.info("请先登录再取消")
  } else {
    const da = {
      id: id,
      //文章id
      contentId: articleId,
      //取消点赞 表示当前评论已经被点赞
      status: 1
    }

       const  {data} = await addReviewLog(da);
    ElMessage.success(data.msg)
    await getCommentList()
  }
}

async function add_praise(id,articleId){
  if (userStore.id === '' || userStore.id == null){
    ElMessage.info("请先登录再点赞")
  }else {
    const da ={
      id:id,
      //文章id
      contentId:articleId
    }
    const  {data} = await addReviewLog(da);
    ElMessage.success(data.msg)
    await getCommentList()
  }
}

async function removeReply(item){
  //传入评论id
  await delReply(item.id)
  await getCommentList()
}
// 请求当前主体的评论列表
const getCommentForm = reactive({
  contentId: props.momentId,
});

/**
 * 获取留言列表
 */
const getCommentList = async () => {
  const {data} = await getReviewList(getCommentForm);
  commentsList.value = data.rows;

};

/**
 * 显示 回复编辑框
 */
const handleReply = async(item) =>  {
  id.value = item.id
  repl.value = item.userName
  drawer.value = true
};

/**
 * 发布/回复 评论
 */
const handlePublish = async (com) => {
  const params = {
    commentDetails: com,
    contentId: props.momentId,
  };
  if (com === '' || com == null){
    ElMessage.info("评论内容不能为空")
  }else {
    await addReview(params)
  }

  comment.value = null;
  await getCommentList()
};


async function reply  (){
  const params = {
    commentDetails: replyCotent.value,
    //评论记录id
    id: id.value,
  };
  if ((replyCotent.value === '' || replyCotent.value == null)){
    ElMessage.info("回复内容不能为空")
  }else {
    await saveReviews(params)
    drawer.value = false
  }
  replyCotent.value = null;
  await getCommentList()
}

async function getLikeNum(){
  const {data:{rows}} = await getLikeList(getCommentForm)

  //TODO目前后端返回的是已经点过赞的评论数据

}
 onMounted(async () => {
  await getCommentList();
  //await getLikeNum()
});
</script>
<style lang="scss" scoped>

// 留言区
.comments {
  margin-top: 30px;
  margin-bottom: 100px;



  .editbox,
  .listbox {
    margin: 0px 20px 20px 20px;
    display: flex;
  }

  // 编辑区
  .editbox {
    justify-content: space-between;
    align-items: center;
    .editbox-middle {
      width: 75%;
    }
  }

  // 列表展示区
  .listbox {
    flex-direction: column;
    border-bottom: 1px solid rgb(189, 187, 187);

    // 时间 + 回复
    .listbox-bottom {
      font-size: 12px;
      color: #9499a0;
      margin: 10px 0 10px 65px;
      display: flex;

      span {
        display: block;
        margin-right: 20px;
      }

      // 这里 color 换成普通颜色表示即可
      span:nth-last-child(-n+2):hover {
        cursor: pointer;
        color: #4f694f;
      }
    }

    // 信息条
    .listbox-top-user {
      display: flex;

      // 个人信息
      p {
        margin-left: 20px;
        width: 100%;
        position: relative;

        span:first-child {
          color: #394b39;
        }
        // 身份标签
        span:last-child {
          margin-left: 5px;
          font-size: 13px;
          padding: 2px;
          background-color: #10c710;
          color: white;
          border-radius: 5px;
          position: absolute;
        }
      }
    }

    // 顶级评论
    .top-level {
      // 根评论内容
      .listbox-middle-root {
        margin-left: 65px;
      }
    }

    // 回复评论输入框
    .replybox {
      margin: 10px 0 20px 65px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 60%;

      .replybox-middle {
        width: 75%;
      }
    }

    // 展示更多
    .view-more {
      margin-left: 65px;
      font-size: 12px;
      color: #9499a0;
    }

    .view-more span:hover,
    .view-less span:hover {
      cursor: pointer;
      color: #374637;
    }

    // 展示更少
    .view-less {
      font-size: 12px;
      color: #9499a0;
      margin-left: 37px;
    }
  }
}





.brutalist-container {
  position: relative;
  width: 70%;
  margin-top: 20px;
  font-family: monospace;
}

.brutalist-input {
  width: 100%;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border: 4px solid #000;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 5px 5px 0 #000, 10px 10px 0 #4a90e2;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}

.brutalist-input:focus {
  animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite,
  glitch 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.brutalist-input:focus::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: white;
  z-index: -1;
}

.brutalist-input:focus::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -2;
  clip-path: inset(0 100% 0 0);
  animation: glitch-slice 4s steps(2, end) infinite;
}

@keyframes glitch-slice {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  10% {
    clip-path: inset(0 5% 0 0);
  }

  20% {
    clip-path: inset(0 80% 0 0);
  }

  30% {
    clip-path: inset(0 10% 0 0);
  }

  40% {
    clip-path: inset(0 50% 0 0);
  }

  50% {
    clip-path: inset(0 30% 0 0);
  }

  60% {
    clip-path: inset(0 70% 0 0);
  }

  70% {
    clip-path: inset(0 15% 0 0);
  }

  80% {
    clip-path: inset(0 90% 0 0);
  }

  90% {
    clip-path: inset(0 5% 0 0);
  }

  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.brutalist-label {
  position: absolute;
  left: -3px;
  top: -35px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 5px 10px;
  transform: rotate(-1deg);
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.brutalist-input:focus+.brutalist-label {
  transform: rotate(0deg) scale(1.05);
  background-color: #4a90e2;
}

.smooth-type {
  position: relative;
  overflow: hidden;
}

.smooth-type::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.smooth-type:focus::before {
  opacity: 1;
  animation: type-gradient 2s linear infinite;
}

@keyframes type-gradient {
  0% {
    background-position: 300px 0;
  }

  100% {
    background-position: 0 0;
  }
}

.brutalist-input::placeholder {
  color: #888;
  transition: color 0.3s ease;
}

.brutalist-input:focus::placeholder {
  color: transparent;
}

.brutalist-input:focus {
  animation: focus-pulse 4s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

@keyframes focus-pulse {

  0%,
  100% {
    border-color: #000;
  }

  50% {
    border-color: #4a90e2;
  }
}

.btn {
  width: 170px;
  height: 60px;
  margin-top: 25px;
  margin-left: 50%;
  font-size: 18px;
  background: #ffb6b9;
  border: none;
  border-radius: 50px;
  color: #000;
  outline: none;
  cursor: pointer;
  transition: all 0.4s;
}

.btn:hover {
  box-shadow: inset 0 0 0 4px #ef476f,
  inset 0 0 0 8px #ffd166,
  inset 0 0 0 12px #06d6a0,
  inset 0 0 0 16px #118ab2;
  background: #073b4c;
  color: #fff;
}

:deep(.el-drawer__body){
  width: 75%;
}
</style>
